<meta charset="UTF-8">
<style>
    div {
        width: 100px;
        height: 100px;
        background: pink;
        text-align: center;
        line-height: 100px;
        float: left;
        margin: 10px;
        font-size: 24px;
        color: yellow;
        transition: all .6s;
        border-radius: 50%;
    }
    
    div:hover {
        background: red;
        color: pink;
        font-size: 30px;
        border-radius: 0px;
    }
</style>

<script>
    var arr = ["黑", "吉", "辽", "冀", "甘", "青", "陕", "豫", "鲁", "晋", "皖", "鄂", "湘", "苏", "川", "澳", "港", "渝", "津", "沪", "京", "藏", "桂", "宁", "蒙", "新", "琼", "台", "闽", "粤", "赣", "浙", "黔", "滇"]
    for (var i = 0; i < arr.length; i++) {
        document.write("<div>" + arr[i] + "</div>")
    }
</script>